<template>
  <!-- 普通模式 -->
  <!-- 高定模式 -->
  <view class="custom-box flex flex-col">
    <view v-for="(category, idx) in goodsListCustom" :key="idx">
      <view class="mb-30rpx" v-if="category.goods[1] || category.goods[2]">
        <!-- 商品分类分隔图片 -->
        <view class="mb-20rpx">
          <image mode="widthFix" :src="category.divider" class="w-full" />
        </view>

        <!--大图商品列表 -->
        <view
          class="mb-20rpx"
          v-for="(goodsBig, idxBig) in category.goods[2]"
          :key="idxBig"
          @click="goto(goodsBig.id)"
        >
          <image mode="widthFix" :src="goodsBig.goods_show" class="w-full" />
        </view>

        <!-- 小图商品列表 -->
        <view class="flex flex-wrap justify-between">
          <view
            class="goods-box"
            v-for="(goodsSmall, idxSmall) in category.goods[1]"
            :key="idxSmall"
            @click="goto(goodsSmall.id)"
          >
            <view class="img-zone">
              <image class="goods-logo" mode="widthFix" :src="goodsSmall.goods_show"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { report } from '@/utils/exception';
  import { getGoodsListCustom as getGoodsListCustomApi } from '@/api/goods/index';
  import type { IndexGoodsList } from '@/types/goods';

  const goodsListCustom = ref<IndexGoodsList[]>([]);

  const getData = (key = '') => {
    getGoodsListCustomApi(key)
      .then((res) => {
        goodsListCustom.value = res.data ?? [];
      })
      .catch((err) => {
        report(err);
      });
  };
  getData();

  const searchGoods = (key: string) => {
    getData(key);
  };

  const goto = (id: number) => {
    uni.navigateTo({ url: `/pages/goods/detail?id=${id}` });
  };

  defineExpose({
    searchGoods,
  });
</script>

<style lang="scss" scoped>
  .custom-box {
    padding: 40rpx 25rpx 30rpx;

    .goods-box {
      display: flex;
      flex-direction: column;
      background: white;
      width: 346rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      border-radius: 15rpx;

      .img-zone {
        .goods-logo {
          width: 100%;
        }
      }
    }
  }
</style>
